<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      :title="`${title}组`"
      :visible.sync="visible"
      width="360px"
      @closed="reset"
    >
      <div class="page">
        <el-form ref="dataForm" :rules="rules" :model="dataForm" label-position="left" label-width="84px">
          <el-form-item label="组号:" class="block" prop="groupCode">
            <el-input v-model.trim="dataForm.groupCode" readonly :maxlength="20" :disabled="title==='编辑'">
              <el-button slot="append" class="append-search" :disabled="title==='编辑'" @click.prevent="getGroupcode">获取</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="组类型" class="block" prop="groupType">
            <el-select v-model="dataForm.groupType" placeholder="请选择">
              <el-option
                v-for="item in groupTypeMap"
                :key="item.value"
                :label="item.desc"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="组名称" class="block" prop="groupName">
            <el-input v-model.trim="dataForm.groupName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="联系人" class="block" prop="contact">
            <el-input v-model.trim="dataForm.contact" maxlength="20" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="联系电话" class="block" prop="contactPhone">
            <el-input v-model.trim="dataForm.contactPhone" maxlength="11" placeholder="请输入" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="$loadingPlugin.del" type="danger" @click="cancel('dataForm')">
          取消
        </el-button>
        <el-button :loading="$loadingPlugin.success" type="primary" @click="sumbit('dataForm')">
          {{ title==='编辑'?'保存':'下一步' }}
        </el-button>
      </div>
    </el-dialog>
    <relevancyCsm ref="relevancyCsm" :group-type-map="groupTypeMap" :sub-type-all-list="subTypeAllList" />
  </div>
</template>

<script>
  import { csmgroupcode, updateCsmGroup } from '@/api'
  import relevancyCsm from './relevancyCsm.vue'
  //   import { formatColumnMap, parseTime } from '@/utils'
  //   import { mapGetters } from 'vuex'
  //   import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'

  export default {
    components: {
      relevancyCsm
    },
    props: {
      groupTypeMap: {
        type: Array,
        default: () => []
      },
      subTypeAllList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        visible: false,
        title: '新增',
        dataForm: { },
        rules: {
          groupCode: [{ required: true, message: '请输入客户组号', trigger: 'change' }],
          groupName: [{ required: true, message: '请输入客户组名称', trigger: 'change' }],
          groupType: [{ required: true, message: '请选择客户组类型', trigger: 'change' }],
          contact: [{ required: true, message: '请输入联系人', trigger: 'change' }],
          contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'change' }]
        }
      }
    },
    computed: {

    },
    watch: {

    },
    mounted() {

    },
    destroyed() {

    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          if (temp) {
            this.title = '编辑'
            this.dataForm = temp
            // console.log(temp)
          }
          this.visible = true
        })
      },
      // 获取客户组编号
      async getGroupcode() {
        const res = await csmgroupcode({})
        this.$set(this.dataForm, 'groupCode', res.data)
      },
      // 取消
      async cancel() {
        this.resolve()
        await this.reset()
        this.visible = false
      },
      // 保存
      sumbit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // console.log(form)
            const params = { ...this.dataForm }
            if (this.title === '编辑') {
              this.submit(params)
            } else {
              this.$refs.relevancyCsm.open(this.dataForm)
            }
          } else {
            return false
          }
        })
      },
      async submit(params) {
        await updateCsmGroup(params)
        this.resolve()
        this.visible = false
        this.$notify({
          title: '提示',
          message: '编辑成功!',
          type: 'success',
          duration: 2000
        })
      },
      reset() {
        this.title = '新增'
        this.dataForm = {}
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate()
        })
      }
    }
  }
</script>

<style lang='scss' scoped>

</style>
